<template>
  <view class="pageLayout">
    <view class="from">
      <view class="input">
        <u-search
          placeholder="请输入场次名称"
          hape="round"
          @change="resetSearch"
          v-model="keyword"
          :clearabled="true"
          :showAction="false"
        ></u-search>
      </view>
    </view>
    <view class="list_box">
      <view class="tabs_box">
        <u-tabs
          :list="tabsList"
          @click="changeTabs"
          :activeStyle="{
            color: '#93c8ff',
            fontWeight: 'bold',
            transform: 'scale(1.15)',
          }"
          :inactiveStyle="{
            color: '#909399',
            transform: 'scale(1)',
            fontWeight: 'bold',
          }"
          lineColor="#419fff"
        ></u-tabs>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="top_box">
            <view class="left">
              <view class="name">
                场次名称：{{ item.classeseRecordName }}
              </view>
              <view class="name"> 所属人：{{ item.realName }} </view>
              <view class="name">
                日期：{{ formatTimestamp(item.recordStartTime, "onlyDate") }}
              </view>
              <view class="name">
                时间段：{{
                  formatTimestamp(item.recordStartTime, "getHouseMin")
                }}-{{ formatTimestamp(item.recordEndTime, "getHouseMin") }}
              </view>
            </view>
            <view class="ico">
              <image src="@/static/images/changeIco.png" mode="widthFix" />
            </view>
            <view class="right">
              <view class="name">
                场次名称：{{ item.exchangeClasseseRecordName }}
              </view>
              <view class="name"> 所属人：{{ item.exchangeRealName }} </view>
              <view class="name">
                日期：{{
                  formatTimestamp(item.exchangeRecordStartTime, "onlyDate")
                }}
              </view>
              <view class="name">
                时间段：{{
                  formatTimestamp(item.exchangeRecordStartTime, "getHouseMin")
                }}-{{
                  formatTimestamp(item.exchangeRecordEndTime, "getHouseMin")
                }}
              </view>
            </view>
          </view>
          <view class="bottom_box">
            <view class="btn">
              <u-button
                @click="Confirm(item)"
                v-if="item.hasConfirm"
                icon="reload"
                type="primary"
                shape="circle"
                >确认交换</u-button
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import {
  QueryVenueExchangePageListApi,
  ConfirmVenueExchangeApi,
} from "@/api/classis/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
  },
  data() {
    return {
      form: {
        keyword: "",
        exchangeState: "WaitBeConfirm",
        pageIndex: 1,
        pageSize: 10,
      },
      tabsList: [
        {
          name: "未交换",
          val: "WaitBeConfirm",
        },
        {
          name: "已交换",
          val: "Exchanged",
        },
      ],
      totalPages: 0, //总页数
      listData: [],
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 获取交换场次列表
     */
    getList() {
      QueryVenueExchangePageListApi(this.form)
        .then((res) => {
          this.listData = [...this.listData, ...res.data.items];
          // console.log(this.listData, "listData");
          this.totalPages = res.data.totalPages;
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 切换tabs
     */
    changeTabs(value) {
      console.log(value);
      this.form.exchangeState = value.val;
      this.resetSearch();
    },
    /**
     * 重置分页
     */
    resetSearch() {
      this.form.pageIndex = 1;
      this.listData = [];
      this.getList();
    },
    /**
     * 确认交换
     */
    Confirm(item) {
      uni.showModal({
        title: "温馨提示",
        content: "您确定要交换场次吗？",
        showCancel: true,
        confirmText: "确定",
        cancelText: "关闭",
        confirmColor: "#FF6B00",
        success: (res) => {
          if (res.confirm) {
            let data = {
              venueExchangeID: item.venueExchangeID,
            };
            ConfirmVenueExchangeApi(data)
              .then((res) => {
                this.$refs.toastRef.showToast({
                  msg: "交换成功",
                  duration: 1000,
                  position: "center",
                });
                this.resetSearch();
              })
              .catch((e) => {
                this.$refs.toastRef.showToast({
                  msg: e.data.detail,
                  duration: 1000,
                  position: "center",
                });
              });
          }
        },
      });
      // return
    },
  },
  onShow() {
    this.resetSearch();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    this.getList();
    // if (this.form.pageIndex < this.totalPages) {
    //   this.form.pageIndex++;
    //   this.getList();
    // }
  },
};
</script>

<style lang="scss" scoped>
.pageLayout {
  background-image: linear-gradient(to bottom, #3c9cff 0, #fff 400rpx);
  height: 100vh;
}

.list_box {
  background-color: #ffffff;
  margin-top: 20rpx;
  border-radius: 30rpx;
  padding: 20rpx;

  .ico {
    width: 50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    .item {
      margin-top: 20rpx;
      padding: 20rpx;
      border-bottom: 2rpx solid #e5e5e5;
      box-shadow: #e5e5e5 0rpx 5rpx 10rpx;

      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          .name {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
        }

        .right {
          .name {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
        }
      }

      .bottom_box {
        display: flex;
        justify-content: flex-end;
        margin-top: 18rpx;

        .btn {
          width: 220rpx;
        }
      }
    }
  }
}
</style>
